<template>
  <!-- 视频组件 -->
  <div class="videoo">
    <div class="com-item active com-item--video com-item-deletable">
      <div class="showcase-video">
        <div class="video-container video-container--visible" style="height: 210.938px;">
          <video controls="controls" 
                 webkit-playsinline="" 
                 playsinline="" 
                 x5-playsinline="" 
                 :src="value.customUrl" 
                 poster="" 
                 controlslist="">当前浏览器不支持最新的video播放</video>
        </div>
      </div>
      <div class="com-widget">
        <i class="widget-del"></i>
        <div class="widget-name">
          <span class="widget-name__arrow-out"></span>
            视频
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['value'],
  created(){
  }
}
</script>

<style lang='less'>
.videoo{
.video-container {
  position: relative;
  width: 100%;
  visibility: hidden
}

.video-container--visible {
  visibility: visible
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%)
}
}

</style>